<template>
  <div class="exception">
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>
      <el-table-column prop="ordernum" label="订单编号" align="center">
      </el-table-column>
      <el-table-column prop="exception" label="上报异常" align="center">
      </el-table-column>
      <el-table-column prop="exceptionback" label="异常回报" align="center">
      </el-table-column>
      <el-table-column prop="type" label="异常类型" align="center">
      </el-table-column>
      <el-table-column prop="status" label="订单状态" align="center">
      </el-table-column>
      <el-table-column
          align="center"
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">


          <el-button type="text" size="small" @click="exceptionFinishProcess(scope.row)"
                     v-show="scope.row.iscancel===1">结算
          </el-button>
          <el-button type="text" size="small" @click="exceptionBack(scope.row)" v-show="scope.row.iscancel===1">驳回
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog
        title="提示"
        :visible.sync="dialogProcessVisible"
        width="30%"
    >
      <el-input v-model="bondIncPercent" placeholder="请输入扣除保证金比例 0 - 100"></el-input>
      <el-input v-model="processPercent" placeholder="请输入代练进度 0 - 100"></el-input>
      <el-input v-model="finishDesc" placeholder="请输入取消说明"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogProcessVisible = false">取 消</el-button>
    <el-button type="primary" @click="finishProcessSure">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible.sync="dialogBackVisible"
        width="30%"
    >
      <el-input v-model="backReason" placeholder="请输入驳回原因"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogBackVisible = false">取 消</el-button>
    <el-button type="primary" @click="backSure">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  exceptions,
  exceptionFinishProcessApi,
  exceptionBackApi
} from '@/api/api.js';


export default {
  data() {
    return {
      tableData: [],
      bondIncPercent: '',
      processPercent: '',
      backReason: '',
      finishDesc: '',
      loading: false,

      dialogProcessVisible: false,
      dialogBackVisible: false,
      data: ''
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData(params) {
      exceptions(params)
          .then(res => {
            console.log(res.data);
            this.tableData = res.data.data
          })
    },

    exceptionFinishProcess(params) {
      this.dialogProcessVisible = true;
      this.data = params;

    },
    exceptionBack(params) {
      this.dialogBackVisible = true;
      this.data = params;
    },
    finishProcessSure() {
      if (this.processPercent === '') {
        alert("代练进度为空!");
      } else if (this.bondIncPercent === '') {
        alert("扣除保证金比例为空!");
      } else if (this.finishDesc === '') {
        alert("取消说明为空!");
      } else {
        this.dialogProcessVisible = false;
        this.loading = true;
        this.data.processPercent = this.processPercent;
        this.data.bondIncPercent = this.bondIncPercent;
        this.data.finishDesc = this.finishDesc;
        exceptionFinishProcessApi(this.data)
            .then(res => {
              if (res.data.result === "成功") {
                console.log(res.data);

              } else {
                alert(res.data.result);
              }
              this.loading = false;
              this.tableData = res.data.data
            })
      }

    },
    backSure() {
      if (this.backReason === '') {
        alert("驳回原因为空!");
      } else {
        this.dialogBackVisible = false;
        this.loading = true;
        this.data.backReason = this.backReason;
        exceptionBackApi(this.data)
            .then(res => {
              if (res.data.result === "成功") {
                console.log(res.data);

              } else {
                alert(res.data.result);
              }
              this.loading = false;
              this.tableData = res.data.data
            })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.report {

  margin-top: 20px;
}
</style>